במאמר השלישי כל מה שהבנתי זה שיש הבדלים בעקבות תקלות טכניות, או משהו כזה. כמה שברחבי האינטרנט חופרים על em, לא ראיתי בשום מקום חפירה על אחוזים. אז מה בעצם ההבדל?
עריכה:
השאלה ב-Stack Overflow
5 תשובות
ענה
% מדבר בהשוואה לאלמנט האב
EM מדבר בשהואאה לברירת מחדל של הדפדפן.
-> text (sized at 110% of browser's default)
-> div (font-size: 200%)
-> text (sized at 200% from parent = 220% of browser)
div ( 1.1 em)
-> text (sized 110% of browser's default)
-> div ( 2em)
-> text (sized 200% of browser's default, not of parent)
ענה
מצאתי במפרט של W3C מידע על em שסותר את מה שאתה אומר (לפי מה שהבנתי):
"Equal to the computed value of the ‘font-size’ property of the element on which it is used."
אז אני יודע מה em עושה, אבל עדיין אין לי מושג מה ההבדל בינו לבין אחוזים. לא מצאתי במפרט שום דבר על אחוזים.
ענו לי ב-ב-Stack Overflow. החלטתי לסכם את התשובות:
- כל ערך percentage (של אחוזים; לדוגמה: 5, 9em, 204%) של line-height יחסי ל-font-size הנוכחי.
- יחידות em תמיד יחסיות ל-font-size הנוכחי.
- אחוזים תלויים בהקשר. לדוגמה, אם משתמשים בהם ב-font-size, הם יהיו יחסיים ל-font-size הנוכחי; אם זה ב-height, הם יהיו יחסיים ל-height.
- זה משתנה קצת כשלאלמנט הורה יש font-size המוגדר כ-small, כ-medium או כ-large, כי הערכים האלה מושפעים מהגדרות הדפדפן. בהקשר הזה, 1em לא שווה ל-100% - נראה כי 1em גורם להגדרות להיות קצת קיצונית יותר; גדול/קטן יותר מהגדול/קטן של 100%. קראו על זה עוד פה.
ענה
אני מתכוון לתרגם בקרוב את המאמר שמסביר על שימוש ב-em. לבינתיים אתה יכול לקרוא על מה שונה ב-rem ב-CSS אם אתה רוצה. :-)
עריכה: הנה קישור למאמר שתרגמתי/ערכתי על em ב-CSS בהרחבה. עדכנתי גם את הקישור ל-rem למעלה.